<template>
  <!-- 技术 & 规则 -->
  <div :class="['tech', { mobile: $isMobile }]">
    <div
      class="top"
      v-if="$isMobile"
    >
      {{ t('header.menu5') }}
    </div>

    <div class="g-con">
      <Banner bannerModel="9" />
    </div>

    <template v-if="$isMobile">
      <div class="tabm clearfix noscrollbar">
        <div
          :class="['item', 'flexcc', { active: activeClass === item.dictValue }]"
          v-for="item in dictData['rule_class']"
          :key="item.dictValue"
          @click="tabChange(item.dictValue)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </template>

    <div class="main mt-4">
      <div class="g-con con">
        <div class="left">
          <div class="ad">
            <a
              :href="getAd('12', 'href')"
              target="_blank"
            >
              <img
                :src="getAd('12', 'image')"
                alt=""
              />
            </a>
          </div>
          <div class="menu mt-3">
            <div
              :class="['item', { active: activeClass === item.dictValue }]"
              v-for="item in dictData['rule_class']"
              @click="tabChange(item.dictValue)"
            >
              {{ item.dictLabel }}
            </div>
          </div>
        </div>
        <div
          v-if="ruleData"
          class="right"
        >
          <div class="module mb-3">
            <div
              class="tit"
              @click="openList(1)"
            >
              {{ t('tech.t1') }}
            </div>
            <div class="con mt-3 grid-2">
              <div class="left" @click="openList(1)">
                <img
                  src="@/assets/img/tech1.png"
                  class="pic"
                />
                <!-- <div class="title line-2">TRUSTEDDOCKS MARKETPLACE LAUNCHED</div> -->
                <!-- <div class="time">2023.05.23</div> -->
                <div class="text noscrollbar line-4">{{ t('tech.text1') }}</div>
              </div>
              <div
                v-if="ruleData.latesRules"
                class="right flexsb-col"
              >
                <div
                  v-if="ruleData.latesRules.ruleTitle"
                  class="item"
                  @click="openDetail(ruleData.latesRules.id)"
                >
                  <img :src="ruleData.latesRules.ruleImage" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.latesRules.ruleTitle }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.latesRules.pubTime, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.latesRules.ruleContent, 120) }}</div>
                  </div>
                </div>
                <div
                  v-if="ruleData.latesRules.explainTitle1"
                  class="item"
                  @click="openDetail(ruleData.latesRules.id)"
                >
                  <img :src="ruleData.latesRules.explainImage1" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.latesRules.explainTitle1 }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.latesRules.pubTime, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.latesRules.explainContent1, 120) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="module mb-3">
            <div
              class="tit"
              @click="openList(2)"
            >
              {{ t('tech.t2') }}
            </div>
            <div class="con mt-3 grid-2">
              <div class="left" @click="openList(2)">
                <img
                  src="@/assets/img/tech2.png"
                  class="pic"
                />
                <!-- <div class="title line-2">TRUSTEDDOCKS MARKETPLACE LAUNCHED</div> -->
                <!-- <div class="time">2023.05.23</div> -->
                <div class="text noscrollbar line-4">{{ t('tech.text2') }}</div>
              </div>
              <div
                v-if="ruleData.comTechnology"
                class="right flexsb-col"
              >
                <div
                  v-if="ruleData.comTechnology.ruleTitle"
                  class="item"
                  @click="openDetail(ruleData.comTechnology.id)"
                >
                  <img :src="ruleData.comTechnology.ruleImage" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.comTechnology.ruleTitle }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.comTechnology.pubTime, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.comTechnology.ruleContent, 120) }}</div>
                  </div>
                </div>
                <div
                  v-if="ruleData.comTechnology.explainTitle1"
                  class="item"
                  @click="openDetail(ruleData.comTechnology.id)"
                >
                  <img :src="ruleData.comTechnology.explainImage1" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.comTechnology.explainTitle1 }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.comTechnology.pubTime, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.comTechnology.explainContent1, 120) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="g-ad mb-3">
            <a
              :href="getAd('11', 'href')"
              target="_blank"
            >
              <img
                :src="getAd('11', 'image')"
                alt=""
              />
            </a>
          </div>

          <div class="module">
            <div
              class="tit"
              @click="openList(3)"
            >
              {{ t('tech.t3') }}
            </div>
            <div class="con mt-3 grid-2">
              <div class="left" @click="openList(3)">
                <img
                  src="@/assets/img/tech3.png"
                  class="pic"
                />
                <!-- <div class="title line-2">TRUSTEDDOCKS MARKETPLACE LAUNCHED</div> -->
                <!-- <div class="time">2023.05.23</div> -->
                <div class="text noscrollbar line-4">{{ t('tech.text3') }}</div>
              </div>
              <div
                v-if="ruleData.moveAbout"
                class="right flexsb-col"
              >
                <div
                  v-if="ruleData.moveAbout.ruleTitle"
                  class="item"
                  @click="openDetail(ruleData.moveAbout.id)"
                >
                  <img :src="ruleData.moveAbout.ruleImage" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.moveAbout.ruleTitle }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.moveAbout.pubTime, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.moveAbout.ruleContent, 120) }}</div>
                  </div>
                </div>
                <div
                  v-if="ruleData.moveAbout.explainTitle1"
                  class="item"
                  @click="openDetail(ruleData.moveAbout.id)"
                >
                  <img :src="ruleData.moveAbout.explainImage1" />
                  <div>
                    <div class="title line-2 mt-2">{{ ruleData.moveAbout.explainTitle1 }}</div>
                    <div class="time mt-1">{{ dateFormat(ruleData.moveAbout.explainTime1, 3) }}</div>
                    <div class="text noscrollbar line-2 mt-1">{{ toText(ruleData.moveAbout.explainContent1, 120) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { toText, dateFormat, openUrl } from '@/utils'
import { useI18n } from 'vue-i18n'
import { getLatestRuleApi } from '@/service/tech'
import Banner from '@/components/Banner.vue'
import useDict from '@/hooks/useDict'
import useAd from '@/stores/ad'
import { watch } from 'vue'

const { dictData, getDictData } = useDict()
const storeAd = useAd()
const { getAd } = storeAd

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()

onBeforeMount(() => {
  init()
})
watch(locale, (n) => {
  init()
})

// 左侧分类
const activeClass = ref('')
const tabChange = (val) => {
  activeClass.value = val
  getData()
}

// 最新数据
const ruleData = ref({})
const getData = () => {
  getLatestRuleApi({
    ruleClass: activeClass.value
  }).then(({ data }) => {
    ruleData.value = data
  })
}

const openList = (type) => {
  openUrl(`/techList`, { ruleClass: activeClass.value, type })
}
const openDetail = (id) => {
  openUrl(`/techDetail`, { id })
}

//
const init = async () => {
  await getDictData('rule_class')
  let index = 0
  if (route.query.ruleClass) {
    index = dictData.value['rule_class'].findIndex((item) => item.dictValue === route.query.ruleClass)
  }
  activeClass.value = dictData.value['rule_class'][index].dictValue
  getData()
}
</script>

<style scoped lang="scss">
.tech {
  .main {
    background: #f5f5f5;
    padding: 30px 0 100px;
    margin-bottom: -76px;

    > .con {
      display: grid;
      grid-template-columns: 240px 1000px;
      gap: 20px;

      > .left {
        .ad {
          height: 240px;
          background: #000000;
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
        .menu {
          background: #fff;
          padding: 10px 0;
          border-radius: 4px;
          .item {
            padding: 15px;
            cursor: pointer;
            &:hover {
              color: var(--mainColor);
            }
            &.active {
              color: var(--mainColor);
              position: relative;
              &::before {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 50%;
                width: 4px;
                height: 24px;
                background: var(--mainColor);
                transform: translateY(-50%);
              }
            }
          }
        }
      }
      > .right {
        .module {
          background: #ffffff;
          border-radius: 4px;
          padding: 27px 30px;
          > .tit {
            padding: 0 0 25px;
            margin-right: -30px;
            border-bottom: 2px solid #212121;
            font-size: 20px;
            color: var(--mainColor);
            text-transform: uppercase;
            font-weight: bold;
            line-height: 1;
            cursor: pointer;
          }
          .con {
            gap: 60px;
            .title {
              color: var(--titleColor);
              font-weight: bold;
              font-size: 16px;
              word-break: break-all;
            }
            .time {
              font-size: 12px;
              color: #9d9fa5;
            }
            .text {
              font-size: 12px;
              line-height: 1.4;
              color: #9d9fa5;
            }
            .left {
              display: grid;
              // grid-template-rows: 170px 15px 10px 67px;
              grid-template-rows: 170px auto;
              gap: 20px;
              height: 330px;
              cursor: pointer;
              .pic {
                width: 100%;
                // height: 100%;
                object-fit: cover;
              }
              .text{
                font-size: 18px;
                color: #252628;
              }
            }
            .right {
              position: relative;
              &::before {
                content: '';
                display: block;
                position: absolute;
                height: 100%;
                width: 1px;
                background: #eaebec;
                left: -30px;
                top: 0;
              }

              .item {
                display: grid;
                grid-template-columns: 140px 280px;
                gap: 20px;
                cursor: pointer;

                img {
                  background: #f2f2f2;
                  height: 140px;
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  &.mobile {
    .g-con {
      width: 100%;
    }

    .top {
      background: #252628;
      color: #fff;
      padding: 12px 20px;
      font-weight: bold;
    }

    .tabm {
      white-space: nowrap;
      overflow-x: scroll;
      .item {
        display: inline-block;
        padding: 10px 20px;
        border-bottom: 2px solid #eaebec;
        &.active {
          color: var(--mainColor);
          border-color: var(--mainColor);
        }
      }
    }

    .main {
      margin-top: 0px;
      background: #fff;
      > .con {
        display: block;
        > .left {
          display: none;
        }

        .module {
          padding: 20px 10px;
          .tit {
            margin-right: 0;
          }
          .con {
            display: block;
            .left {
              display: block;
              // grid-template-rows: auto 15px 10px 67px;
              // gap: 10px;
              height: auto;
              img {
                width: 100%;
              }
            }

            .right {
              margin-top: 10px;
              .item {
                margin-top: 10px;
                grid-template-columns: 120px auto;
                img {
                  height: 90px;
                }
                .title {
                  margin-top: 0 !important;
                  -webkit-line-clamp: 1;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
